<template>
	<div>
		<div class="banner" :class="className">
			<el-carousel height="150px">
				<el-carousel-item v-for="(item, index) in list.data" :key="item">
					<el-image :src="item.url" v-if="item.url" mode="widthFix" />
					<div class="image-null" v-else>
						<el-icon><Picture /></el-icon>
					</div>
					<div class="banner_title" v-if="item.title">{{ item.title }}</div>
				</el-carousel-item>
			</el-carousel>
			<!-- <div class="banner_img" :style="{ width: 100 * list.data.length + '%' }">
				<a v-for="(item, index) in list.data" :key="index">
					<el-image :src="item.url" v-if="item.url" mode="widthFix" />
					<div class="image-null" v-else>
						<el-icon><Picture /></el-icon>
					</div>
					<div class="banner_title" v-if="item.title">{{ item.title }}</div>
				</a>

				<div class="swiper_btn">
					<div class="btn" v-for="(item, index) in swiperNum" :key="item" :class="index === current ? 'active' : ''"></div>
				</div>
			</div> -->
		</div>
	</div>
</template>

<script setup lang="ts" name="banner">
import { onBeforeMount, ref, computed } from 'vue';
const props = defineProps({
	// 列表内容
	data: {
		type: Object,
		default: () => {},
	},
});

const current = ref(0);

const swiperNum = computed(() => {
	return Math.ceil(props.data.data.length);
});

const list = ref();
onBeforeMount(() => {
	list.value = props.data;
	if (list.value && list.value.data && list.value.data.length <= 0) {
		list.value.data.push({});
	}
});

function getNewUrl(url) {
	console.log('🚀 ~ file: Banner.vue:48 ~ getNewUrl ~ url:', url);
	return `${url}?v=${new Date().getTime()}`;
}
</script>

<style lang="scss" scoped>
.banner {
	position: relative;
	width: 100%;
	height: 150px;
	background-color: #fff;
}

.banner_img {
	z-index: 5;
	height: 150px;
	// border-radius: 10px;
	display: flex;
	overflow: scroll;
	a {
		width: 100%;
	}
}
.banner_img::-webkit-scrollbar {
	width: 0px;
	height: 0px;
}

.image-null {
	width: 100%;
	height: 100%;
	font-size: 50px;
	scrollbar-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c1c1c1;
}

.swiper_btn {
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	padding: 9px;
	display: flex;
	z-index: 6;
	display: flex;
	justify-content: center;

	.btn {
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background-color: rgb(172, 172, 172);
		margin-right: 9px;
		cursor: pointer;

		&:last-child {
			margin-right: 0;
		}

		&.active {
			background-color: rgb(34, 111, 234);
		}
	}
}

.banner_title {
	width: 100%;
	height: 30px;
	position: absolute;
	bottom: 0;
	background-color: rgba($color: #000000, $alpha: 0.4);
	color: #fff;
	display: flex;
	align-items: center;
	padding-left: 5px;
}

.demonstration {
	color: #000;
}

.el-carousel__item h3 {
	color: #475669;
	opacity: 0.75;
	line-height: 150px;
	margin: 0;
	text-align: center;
}
</style>
